<template>
  <el-dialog ref="dialog" :visible.sync="dialogModel" :title="title" @close="handleClose" :close-on-press-escape="true" custom-class="customer-search-dialog" size="small">
    <el-form size="mini" label-position="top">
      <el-form-item v-for="(item, index) in formData" :key="index">
        <el-select v-model="item.flagname"
                   :placeholder="$t('public.pleasePick')" >
          <el-option :label="$t('public.pleasePick')" value="">
          </el-option>
          <el-option v-for="option in selectState" :label="option.label" :value="option.value">
          </el-option>
        </el-select>
        <el-select class="middle"  v-model="item.condition"
                   :placeholder="$t('public.pleasePick')" >
          <el-option v-for="option in condition" :label="option.label" :value="option.value">
          </el-option>
        </el-select>
        <el-input v-model.trim="item.value" size="mini" class="width169"></el-input>
        <i v-if="index === 0" class="iconfont icon-zhankai el-icon--right" @click="addOptions"></i>
        <i v-if="index !== 0" class="iconfont icon-zuixiaohua el-icon--right el-icon--red"
           @click="deleteOptions(index)"></i>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button @click.stop="handleClose" class="primary_btn">
        {{$t('public.cancel')}}
      </el-button>
      <el-button type="primary" @click.stop="saveSearch" class="primary_btn">
        {{$t('public.save')}}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
  // import {deepClone} from '@/utils/m7Utils'
  import {checkform} from '@/utils/validate'
  export default {
    name: 'Business',
    data () {
      return {
        dialogModel: false,
        formData: [],
        searchOptions: {

        },
        condition: [
          {label: this.$t('public.moreThan'), value: 'over'},
          {label: this.$t('public.lessThan'), value: 'less'},
          {label: this.$t('public.equal'), value: 'equal'}
        ],
        chooseOptions: [
        ],
        chooseObject: {'0': 'createUser'}
      }
    },
    components: {
    },
    props: {
      type: {type: String, default: ''},
      title: {type: String, default: ''},
      selectState: {
        type: Array,
        default: function () {
          return []
        }
      },
      data: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      open (item) {
        this.dialogModel = true
        this.$nextTick(() => {
          this.init()
        })
      },
      handleClose () {
        this.dialogModel = false
      },
      // 保存监控
      saveSearch () {
        let arr = []
        let valide = true
        for (let i = 0; i < this.formData.length; i++) {
          let item = this.formData[i]
          if (item.flagname === '') {
            // 如果flagname为空，调过该条（默认校验成功，提交时删除该条）
            continue
          }
          let currentconditon = ''
          for (let i in item) {
            if (!item[i]) {
              // 为空校验
              this.$message.error(this.$t('monitor.warningEmpy'))
              valide = false
              break
            } else if (i === 'value' && checkform(item[i], 'Number5')) {
              // 数字校验
              this.$message.error(this.$t('monitor.warningNumber'))
              valide = false
              break
            }
            currentconditon += item[i]
          }
          // 条件相同校验
          if (arr.indexOf(currentconditon) === -1) {
            arr.push(currentconditon)
          } else {
            this.$message.error(this.$t('monitor.warningCommon'))
            valide = false
            break
          }
        }
        if (!valide) {
          return
        }
        let fromData = this.formData.filter((item) => item.flagname)
        this.$emit('save', {config: {
          [this.type]: fromData
        }})
      },
      // 初始化数据
      init () {
        this.formData = []
        let config = this.data || []
        if (config && config.length) {
          this.formData = config
        } else {
          this.formData = [{flagname: '', value: '', condition: ''}]
        }
      },
      // 添加监控项
      addOptions () {
        this.formData.splice(this.formData.length, 0, {flagname: '', value: '', condition: ''})
      },
      // 删除监控项
      deleteOptions (index) {
        this.formData.splice(index, 1)
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .width190
    width 190px
  .width169
    width 169px
  .width380
    width 380px
  .padding
    display inline-block
    padding 0 10px
  .footer
    text-align center
  .el-icon--right
    display inline-block
    margin-left 10px
    color $c-main
    cursor pointer
  .el-icon--red
    color $c-pink
  .middle
    padding 0 20px
</style>
